<template>
	<view class="repair-wrap">
		<view style="border-top: 1px solid #F7F8F9;background-color: #FFFFFF;margin-top: 10px;padding-bottom: 10px;">
			<view style="width: 88%;margin:auto;">
				<view class="header-li">
					<view style="width: 98px;">
						<view><span style="color: red;padding: 3px;">*</span>种类</view>
					</view>
					<picker :value="indexe" @change="typeBtn" :range="petKind" range-key="name" mode="selector">
						<view class="form-select">{{petKind[indexe].name}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view>出生日期</view>
					</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view style="margin-top: -1px;"><span style="color: red;padding: 3px;">*</span>品种</view>
					</view>
					<view class="input1">
						<u-input style="margin-top:6px" v-model="ruleFrom.breed" placeholder="请输入（如：金毛、巨贵）" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view style="margin-top: -1px;"><span style="color: red;padding: 3px;">*</span>颜色</view>
					</view>
					<view class="input1">
						<u-input style="margin-top:6px" v-model="ruleFrom.colour" placeholder="请输入颜色" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view style="margin-top: -1px;"><span style="color: red;padding: 3px;">*</span>名称</view>
					</view>
					<view class="input1">
						<u-input style="margin-top:6px" v-model="ruleFrom.name" placeholder="请输入名称" />
					</view>
				</view>
				<view class="header-li">
					<view style="width: 98px;">
						<view style="margin-top: -1px;"><span style="color: red;padding: 3px;">*</span>是否打疫苗</view>
					</view>
					<picker :value="indexV" @change="typeBtnvaccinum" :range="vaccinum" range-key="name"
						mode="selector">
						<view class="form-select">{{vaccinum[indexV].name}}</view>
					</picker>
				</view>
				<view class="guarn-box u-m-t-60">
					<view style="display: flex; align-items: center;"><span
							style="color: red;padding: 3px;">*</span>宠物照片:
						<view @click="uoloadHouse(1)" class="guarn-box-img" v-if="fileList.length<3">
							<image class="guarn-box-uplod_img" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode="">
							</image>
							<view class="guarn-box-uplod">点击上传图片</view>
							<view class="header-upload-txt">
								(最多上传3张图片)
							</view>
						</view>

					</view>
					<view style="display: flex;">
						<view class="guarn-box guarn-box2 u-m-t-20" v-if="fileList.length>0">
							<view class="guarn-box2-img" v-for="(item,index) in fileList">
								<image :src="item" style="border-radius: 20rpx;"></image>
								<u-icon @click="colseImg(item)" name="close" color="red" size="40"
									class="guarn-box2-img-close"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view style="border-bottom: 1px solid #EEEEEEFF;padding-bottom: 10px;">
					<view class="guarn-box u-m-t-60">
						<view style="display: flex;align-items: center;">
							<span style="color: red;padding: 3px; ">*</span>
							证件:

							<view @click="uoloadHouse(2)" class="guarn-box-img" v-if="!ruleFrom.certificate">
								<image class="guarn-box-uplod_img" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode="">
								</image>
								<view class="guarn-box-uplod">点击上传图片</view>
								<view class="header-upload-txt">
									(最多上传1张图片)
								</view>
							</view>
						</view>
						<view style="display: flex;">
							<view class="guarn-box guarn-box2 u-m-t-20" v-if="ruleFrom.certificate">
								<view class="guarn-box2-img">
									<image :src="ruleFrom.certificate" style="border-radius: 20rpx;" mode="aspectFill">
									</image>
									<u-icon @click="colseImg1(ruleFrom.certificate)" name="close" color="red" size="40"
										class="guarn-box2-img-close"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 30px;padding-bottom: 20px;">
				<button class="yilingqu" @click="submintAdd">确认新增宠物</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				type: 1,
				index: 0,
				array: ['分类', '分类二'],
				inday: 0,
				ruleForm: {
					renType: null,
				},
				indexList: true,
				ruleFrom: {
					room_id: null, //房间号
					owner_id: null, //业主id
					user_id: null, //上传人id
					name: null, //名称
					kind: null, //宠物种类
					breed: null, //品种
					colour: null, //颜色
					birth_time: null, //出生日期
					vaccinum: null, //是否打疫苗0.未打 1.已打
					image: null, //照片
					certificate: null, //证件
				},
				indexe: 0,
				petKind: [{
						id: 0,
						name: '请选择'
					},
					{
						id: 1,
						name: '小猫'
					},
					{
						id: 2,
						name: '小狗'
					},
					{
						id: 3,
						name: '小兔子'
					},
					{
						id: 4,
						name: '乌龟'
					}
				],
				date: '请选择时间',
				indexV: 0,
				vaccinum: [{
						id: -1,
						name: '请选择是否打疫苗'
					},
					{
						id: 0,
						name: '未打'
					},
					{
						id: 1,
						name: '已打'
					}
				],
				fileList: [],
			}
		},
		onShow() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			console.log(this.homelist)
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//确认新增宠物
			submintAdd() {
				this.ruleFrom.room_id = this.homelist.roomId
				this.ruleFrom.owner_id = this.homelist.ownerId
				this.ruleFrom.user_id = this.homelist.ownerUserId
				this.ruleFrom.image = this.fileList.toString()
				if (this.ruleFrom.kind == null) {
					return uni.showToast({
						title: '请选择宠物种类',
						icon: 'none',
					})
				}
				if (this.ruleFrom.breed == null) {
					return uni.showToast({
						title: '请输入宠物品种',
						icon: 'none',
					})
				}
				if (this.ruleFrom.colour == null) {
					return uni.showToast({
						title: '请输入宠物颜色',
						icon: 'none',
					})
				}
				if (this.ruleFrom.name == null) {
					console.log('this.ruleFrom.name.namethis.ruleFrom.name.name', this.ruleFrom.name)
					return uni.showToast({
						title: '请输入宠物名称',
						icon: 'none',
					})
				}
				console.log('his.ruleFrom.vaccinum ', this.ruleFrom.vaccinum)
				if (this.ruleFrom.vaccinum == null || this.ruleFrom.vaccinum == -1) {
					return uni.showToast({
						title: '请选择是否打疫苗',
						icon: 'none',
					})
				}
				if (this.ruleFrom.image.length <= 0) {
					return uni.showToast({
						title: '请上传宠物照片',
						icon: 'none',
					})
				}
				console.log('this.ruleFrom.image', this.ruleFrom.certificate)
				if (!this.ruleFrom.certificate) {
					return uni.showToast({
						title: '请上传宠物证件照片',
						icon: 'none',
					})
				}
				this.$request.api.getAddkind(this.ruleFrom).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '新增宠物信息成功',
							icon: 'none'
						});
						setTimeout(function() {
							uni.redirectTo({
								url: '/my/information/informationPetlist'
							})
						}, 200)

						this.ruleFrom.room_id = null; //房间号
						this.ruleFrom.owner_id = null; //业主id
						this.ruleFrom.user_id = null; //上传人id
						this.ruleFrom.name = null; //名称
						this.ruleFrom.kind = null; //宠物种类
						this.ruleFrom.breed = null; //品种
						this.ruleFrom.colour = null; //颜色
						this.ruleFrom.birth_time = null; //出生日期
						this.ruleFrom.vaccinum = null; //是否打疫苗0.未打 1.已打
						this.ruleFrom.image = null; //照片
						this.ruleFrom.certificate = null; //证件

					} else {
						uni.showToast({
							title: '新增宠物信息失败',
							icon: 'none'
						});
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
				//return `${year}-${month}`;
			},
			//选择时间
			bindDateChange: function(e) {
				this.date = e.target.value
				this.ruleFrom.birth_time = this.date
			},
			//选择种类
			typeBtn: function(e) {
				this.indexe = e.target.value
				this.ruleFrom.kind = this.petKind[this.indexe].name
			},
			//选择是否打疫苗
			typeBtnvaccinum: function(e) {
				this.indexV = e.target.value
				this.ruleFrom.vaccinum = this.vaccinum[this.indexV].id
			},
			checked(index) {
				this.isActive = index
			},
			newly() {
				uni.navigateTo({
					url: '/privateMsg/clap/homepageClap'
				})
			},
			shouList() {
				this.indexList = !this.indexList
			},
			//宠物照片
			colseImg(val) {
				if (val) {
					let filsArr = this.fileList;
					this.fileList = [];
					for (let i = 0; i < filsArr.length; i++) {
						if (filsArr[i] != val) {
							this.fileList.push(filsArr[i]);
						}
					}
				}
			},
			// 选择图片
			uoloadHouse(val) {

				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						console.log(res, val, '{{{{{{{{{{{{{res}}}}}}}}}}}}}')
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 9, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {

									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if (val == 1) {
												_this.fileList.push(res.data.data);
											} else {
												_this.ruleFrom.certificate = res
													.data.data
											}
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if (val == 1) {
												_this.fileList.push(res.data.data);
											} else {
												_this.ruleFrom.certificate = res
													.data.data
											}
											_this.imgFlag = false;
										})
									})
								}

							});
						}
					},
					fail: function(res) {}
				});
			},
			//证件
			colseImg1(val) {
				this.ruleFrom.certificate = null;
				if (!this.ruleFrom.certificate) {
					this.imgFlag = true
				}
			},
			// 选择图片
			uoloadHouse1() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleFrom.certificate = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}

							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											_this.ruleFrom.certificate = res.data
												.data
											_this.imgFlag = false;
										})
									})
								}
							});
						}
					},
					fail: function(res) {}
				});
			},
		}
	}
</script>
<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.header-li {
		display: flex;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 102rpx;
		color: #333333;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.header-name {
		width: 186rpx;
	}

	.form-select {
		width: 480rpx;
		background: url(https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/right.png) no-repeat center right;
		background-size: 10rpx 17rpx;
	}

	.yilingqu {
		width: 80%;
		height: 84rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.guarn-box {
		width: 100%;
	}

	.guarn-box2 {
		display: flex;
	}

	.guarn-box2-img {
		width: 216rpx;
		height: 216rpx;
		margin-right: 20rpx;
		position: relative;

		.guarn-box2-img-close {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}

	.guarn-box2 image {
		width: 216rpx;
		height: 216rpx;
	}
	.guarn-box-img {
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		text-align: center;
		border-radius: 4rpx;
		margin-right: -18px;

		.guarn-box-uplod_img {
			width: 19px;
			height: 17px;
			margin-left: 6rpx;
		}

		.guarn-box-uplod {
			color: blue;
			font-weight: 700;
			margin-right: 6rpx;
		}
	}
</style>